<template>
  <div class="container">
    <div class="title">
      <div class="status">用户查询</div>
      <div class="inquire">
        <div>?</div>
        <div class="help">帮助和服务</div>
        <div>&lt;&lt;</div>
      </div>
    </div>
    <div class="box">
      <el-button class="buttom"
                 @click="go">添加客户</el-button>
      <div class="choose">
        <ul class="interactive_box">
          <li class="interactive special">
            <div class="user">全部客户<span class="point"></span></div>
            <div class="user c">1位</div>
          </li>
          <li class="interactive">
            <div class="user">全部客户<span class="point"></span></div>
            <div class="user c">1位</div>
          </li>
          <li class="interactive">
            <div class="user">全部客户<span class="point"></span></div>
            <div class="user c">1位</div>
          </li>
          <li class="interactive">
            <div class="user">全部客户<span class="point"></span></div>
            <div class="user c">1位</div>
          </li>
        </ul>
        <div style="border: 0.5px solid #eee;margin: 10px"></div>
        <ul class="choose_ul">
          <li class="item">
            <div class="block">
              <span class="demonstration">上次消费时间：</span>
              <el-date-picker v-model="value2"
                              type="datetimerange"
                              :picker-options="pickerOptions"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right" />
            </div>
          </li>
          <li class="item">
            <div class="block">
              <span class="demonstration">成为客户时间：</span>
              <el-date-picker v-model="value3"
                              type="datetimerange"
                              :picker-options="pickerOptions"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right" />
            </div>
          </li>
          <li class="item">
            <div class="block">
              <span>成为会员时间：</span>
              <el-date-picker v-model="value4"
                              type="datetimerange"
                              :picker-options="pickerOptions"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right" />
            </div>
          </li>
          <li class="item f">
            <div>
              <span class="ml">关键字：</span>
              <el-input v-model="input"
                        class="input"
                        placeholder="请输入内容" />
            </div>
          </li>
        </ul>
        <div class="box_bottom">
          <el-button class="btn c">筛选</el-button>
          <span>重置筛选条件</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              展开<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">222</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">888</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">999</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check">555</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check">222</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="order_box">
        <div class="order_details">
          <div style="border: 0.5px solid #eee;" />
          <ul class="options">
            <li class="options_all">
              <el-checkbox v-model="checked">当页全选</el-checkbox>
            </li>
            <li class="options_btn">
              <el-dropdown size="mini"
                           split-button>
                加标签
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item>双皮奶</el-dropdown-item>
                  <el-dropdown-item>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li class="options_btn">
              <el-dropdown size="mini"
                           split-button>
                给积分
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item>双皮奶</el-dropdown-item>
                  <el-dropdown-item>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li class="options_btn">
              <el-dropdown size="mini"
                           split-button>
                更多
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item>双皮奶</el-dropdown-item>
                  <el-dropdown-item>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
          <ul class="order_title_box">
            <li class="order_details_title">
              <div class="pl">
                <el-checkbox v-model="checked">客户</el-checkbox>
              </div>
            </li>
            <li class="order_details_title">权益卡</li>
            <li class="order_details_title">积分</li>
            <li class="order_details_title">储值余额</li>
            <li class="order_details_title">购买次数</li>
            <li class="order_details_title">累计消费金额</li>
            <li class="order_details_title">上次消费时间</li>
            <li class="order_details_title">操作</li>
          </ul>
          <div style="border: 0.5px solid #eee;" />
          <div class="goods_box">
            <ul class="order">
              <li class="order_item">
                <div class="order_item_l">
                  <el-checkbox v-model="checked"
                               class="lab" />
                  <div class="order_img" />
                  <div>
                    <div>回复即可撒谎覅</div>
                    <div>15326485123</div>
                  </div>
                </div>
              </li>
              <li class="order_item">0</li>
              <li class="order_item">100</li>
              <li class="order_item">1000</li>
              <li class="order_item">123</li>
              <li class="order_item">666</li>
              <li class="order_item">
                <div>2020-10-20</div>
                <div>18:15:45</div>
              </li>
              <li class="order_item">
                <span>设置权益卡</span>
                <span>会员价</span>
                <span>更多</span>
              </li>
            </ul>
          </div>
          <div style="border: 0.5px solid #eee;" />
          <div class="pagination">
            <el-pagination background="#eee"
                           :current-page="currentPage4"
                           :page-size="10"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="400"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" />
          </div>
        </div>
        <div v-if="true"
             class="order_none">
          <div class="icon" />
          <el-button class="btn">查看我的用户</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { USER } from '@/services/index';

export default {
  data() {
    return {
      checked: true,
      // 分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime());
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      value3: '',
      value4: '',
      radio: '1',
    };
  },
  created() {
    USER.userLogin();
  },
  methods: {
    go() {
      this.$router.push({ path: '/icon/index?id=uuuu' });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
